import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';
import { HeaderCover,HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, Button, SearchWrapper, SearchInfo, SearchInfoTitle, SearchInfoSwitch, SearchInfoItem, SearchInfoList } from './style';
import { actionCreators } from './store'
import { Link } from 'react-router-dom'
import {actionCreators as loginActionCreators} from '../../pages/login/store'

class Header extends PureComponent {
  getListArea() {
    const {  focused, list, page, totalPage, mouseIn, handlserMounseEnter, handlserMounseLeave, handlserChangePage } = this.props
    const newList = list.toJS()
    const pageList = []
    if (newList.length) {
      for (let i = (page - 1) * 10; i < page * 10; i++) {
        pageList.push(<SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>)
      }
    }
    if (focused || mouseIn) {
      return (
        <SearchInfo
          onMouseEnter={handlserMounseEnter}
          onMouseLeave={handlserMounseLeave}
        >
          <SearchInfoTitle>热门搜索
              <SearchInfoSwitch onClick={() => { handlserChangePage(page, totalPage, this.spinIcon) }}>
              <i className="iconfont spin" ref={(icon) => this.spinIcon = icon}>&#xe870;</i>
                换一批
              </SearchInfoSwitch>
          </SearchInfoTitle>
          <SearchInfoList>
            {pageList}
          </SearchInfoList>
        </SearchInfo>
      )
    } else {
      return null
    }
  }
  render() {
    const { logout,login, focused, handlerInputFocus, handlerInputBlur, list } = this.props
    return (
      <HeaderCover>
        <HeaderWrapper>
          {/* logo */}
          <Link to="/">
            <Logo />
          </Link>
          <Nav>
            <NavItem className='left active'>首页</NavItem>
            <NavItem className='left'>下载App</NavItem>
            <SearchWrapper>
              <CSSTransition
                timeout={200}
                in={focused}
                classNames='slide'
              >
                <NavSearch
                  className={focused ? 'focused' : ''}
                  onFocus={() => { handlerInputFocus(list) }}
                  onBlur={handlerInputBlur}
                ></NavSearch>
              </CSSTransition>
              <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe60c;</i>
              {this.getListArea()}
            </SearchWrapper>
            {
              login ?
              <NavItem 
                className='right'
                onClick={logout}
              >退出</NavItem> 
              : 
              <Link to="/login">
                <NavItem 
                  className='right'
                >登录</NavItem>
              </Link>
              
            }
            <NavItem className='right'>
              <i className="iconfont">&#xe636;</i>
            </NavItem>
          </Nav>
          <Addition>
            <Link to="/write">
            <Button className='writting'><i className='iconfont'>&#xe724;</i>写文章</Button>
            </Link>
            <Button className='reg'>注册</Button>
          </Addition>
        </HeaderWrapper>
      </HeaderCover>
    )
  }
  
}

const mapStataToProps = (state) => {
  return {
    focused: state.getIn(['header', 'focused']),
    list: state.getIn(['header', 'list']),
    page: state.getIn(['header', 'page']),
    totalPage: state.getIn(['header', 'totalPage']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    login: state.getIn(['login','login'])
  }
}

const mapDispathToProps = (dispatch) => {
  return {
    handlerInputFocus(list) {
      // 避免ajax重复发送
      (list.size === 0) && dispatch(actionCreators.getList())
      dispatch(actionCreators.searchFocus())
    },
    handlerInputBlur() {
      dispatch(actionCreators.searchBlur())
    },
    handlserMounseEnter() {
      dispatch(actionCreators.mouseEnter())
    },
    handlserMounseLeave() {
      dispatch(actionCreators.mouseLeave())
    },
    handlserChangePage(page, totalPage, spinIcon) {
      // 设置小圆圈旋转
      let originAngle = spinIcon.style.transform.replace(/[^0-9]/ig, '')
      if (originAngle) {
        originAngle = parseInt(originAngle, 10)
      } else {
        originAngle = 0
      }
      spinIcon.style.transform = 'rotate(' + (originAngle + 360) + 'deg)'
      // 发送当前页面
      if (page < totalPage) {
        dispatch(actionCreators.changePage(page + 1))
      } else {
        dispatch(actionCreators.changePage(1))
      }
    },
    logout(){
      dispatch(loginActionCreators.logout())
    }
  }
}

export default connect(mapStataToProps, mapDispathToProps)(Header)